<script setup lang="ts">
// https://mdnice.com/writing/a529a54859cc45908bfb89f51636315a
import {onMounted, ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {useFullscreen, useDark} from '@vueuse/core'
import useColorStore from '@/store/color'
import useFastnavStore from '@/store/fastnav'
import useAuthStore from '@/store/auth'
import * as MenuUtil from '@/util/menu'

import MenuItem from "@/views/Main/components/menuItem.vue";

const route = useRoute()
const router = useRouter()
const colorStore = useColorStore()
const fastnavStore = useFastnavStore()
const authStore = useAuthStore()
const {isFullscreen, toggle} = useFullscreen()

const isDark = useDark()
// 获取管理员角色
// const [menus, routes] = MenuUtil.gen(11)
// console.log('menus:', menus)
// console.log('routes:', routes)
import useMenuStore from '@/store/menu'

const menuStore = useMenuStore()
// const collapse = ref(false)
const menus = ref<IMenu[]>([])


onMounted(() => {
  const [genMenus, _genRoutes] = MenuUtil.gen(authStore.userInfo!.type)

  menus.value = genMenus
  // console.log(menus.value);
})

const onCollapseSwitch = () => {
  menuStore.collapse = !menuStore.collapse
}

const handleUserCommand = (command: string) => {
  if (command == 'info') {
    router.push('/Home')
  } else if (command == 'password') {
    router.push('/sys/AdmUserPassword')
  } else if (command == 'logout') {
    // 清空登录相关信息

    authStore.logout()
    router.push('/login')
  }
}

const onTagClick = (path: string) => {
  if (path == fastnavStore.currPath) return
  router.push(path)
}

const onTagClose = (path: string) => {
  console.log(`关闭页签:${path}`)
  const pathNew = fastnavStore.removeData(path)
  if (!pathNew) return
  router.push(pathNew)
}

const tagMenuReloadDisabled = ref(false)
const tagMenuCloseDisabled = ref(false)
const tagMenuOtherDisabled = ref(false)
const tagMenuLeftDisabled = ref(false)
const tagMenuRightDisabled = ref(false)
let navbarItem: IFastnavItem
const navbarDropdown = ref()
const openTagContextMenu = (e: PointerEvent, item: IFastnavItem) => {
  navbarItem = item
  navbarDropdown.value.handleClose()

  tagMenuReloadDisabled.value = item.path != fastnavStore.currPath
  tagMenuCloseDisabled.value = fastnavStore.datas.length == 1
  tagMenuOtherDisabled.value = fastnavStore.datas.length == 1
  tagMenuLeftDisabled.value = fastnavStore.isFirst(item.path)
  tagMenuRightDisabled.value = fastnavStore.isLast(item.path)

  setTimeout(() => {
    navbarDropdown.value.$el.style.left = e.x + 'px'
    navbarDropdown.value.$el.style.top = e.y + 'px'
    navbarDropdown.value.handleOpen()
  }, 50)
}

const handleTagCommand = (command: string) => {
  if (command == 'reload') {
    router.push({path: fastnavStore.currPath, query: {_reload_: fastnavStore.idAdd(fastnavStore.currPath)}})
  } else if (command == 'close') {
    onTagClose(navbarItem.path)
  } else if (command == 'closeOther') {
    const pathNew = fastnavStore.removeOther(navbarItem.path)
    if (!pathNew) return
    router.push(pathNew)
  } else if (command == 'closeLeft') {
    const pathNew = fastnavStore.removeLeft(navbarItem.path)
    if (!pathNew) return
    router.push(pathNew)
  } else if (command == 'closeRight') {
    const pathNew = fastnavStore.removeRight(navbarItem.path)
    if (!pathNew) return
    router.push(pathNew)
  }
}
</script>

<template>
  <el-container>
    <el-header>
      <div class="header-left" :style="{width: menuStore.width}">
        <router-link to="/">
          <div class="logo">VE</div>
          <div v-if="!menuStore.collapse" class="title"><span>Vue Element</span></div>
        </router-link>
      </div>
      <div class="header-center">
        <el-icon size="22" @click="onCollapseSwitch" style="margin-left: 15px;cursor: pointer">
          <expand v-if="menuStore.collapse"/>
          <fold v-else/>
        </el-icon>
        <el-scrollbar>
          <div class="navbar">
            <el-tag v-for="item in fastnavStore.datas"
                    :type="item.path == fastnavStore.currPath ? 'primary' : 'info'" size="large"
                    :closable="fastnavStore.datas.length != 1"
                    @click="onTagClick(item.path)"
                    @close="onTagClose(item.path)"
                    @contextmenu.native.prevent="openTagContextMenu($event, item)"
            >
              {{ item.desc }}
            </el-tag>
          </div>
        </el-scrollbar>
        <el-dropdown ref="navbarDropdown" trigger="contextmenu" style="position: absolute;"
                     @command="handleTagCommand">
          <span></span>
          <template #dropdown>
            <!--            重新加载只有当前页面才激活-->
            <!--            关闭只有页签数量大于1才激活-->
            <!--            关闭其他只有页签数量大于1才激活-->
            <!--            关闭左侧如果页签是第一个不激活-->
            <!--            关闭右侧如果页签是最后一个不激活-->
            <el-dropdown-menu>
              <el-dropdown-item command="reload" icon="Refresh"
                                :disabled="tagMenuReloadDisabled">重新加载
              </el-dropdown-item>
              <el-dropdown-item command="close" icon="Close"
                                :disabled="tagMenuCloseDisabled">关闭
              </el-dropdown-item>
              <el-dropdown-item command="closeOther" icon="Delete"
                                :disabled="tagMenuOtherDisabled">关闭其他
              </el-dropdown-item>
              <el-dropdown-item command="closeLeft" icon="Back"
                                :disabled="tagMenuLeftDisabled">关闭左侧
              </el-dropdown-item>
              <el-dropdown-item command="closeRight" icon="Right"
                                :disabled="tagMenuRightDisabled">关闭右侧
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div class="header-right">
        <el-color-picker v-model="colorStore.primary" show-alpha :predefine="colorStore.primaryPredefines"
                         @active-change="colorStore.primaryChange" @change="colorStore.primarySave"
                         style="margin-right: 15px;"/>
        <el-switch v-model="isDark" style="margin-right: 15px;" active-action-icon="moon-night"
                   inactive-action-icon="sunny"/>
        <el-icon style="margin-right: 15px;" @click="toggle">
          <rank v-if="isFullscreen"/>
          <full-screen v-else/>
        </el-icon>
        <el-dropdown trigger="click" @command="handleUserCommand">
          <span class="user-info">
             <el-icon class="el-icon--left"><user/></el-icon>
             {{ authStore.userInfo?.account }}
             <el-icon class="el-icon--right"><arrow-down/></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info">个人信息</el-dropdown-item>
              <el-dropdown-item command="password">修改密码</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <el-container>
      <el-aside :width="menuStore.width">
        <el-scrollbar>
          <el-menu router :default-active="route.path" :collapse="menuStore.collapse">
            <menu-item v-for="menu in menus" :menu="menu"></menu-item>
          </el-menu>
        </el-scrollbar>
      </el-aside>
      <el-main>
        <el-scrollbar>
          <!-- 路由缓存-->
          <router-view v-slot="{ Component, route }">
            <keep-alive>
              <component :is="Component" :key="fastnavStore.idGet(route.path)"/>
            </keep-alive>
          </router-view>
        </el-scrollbar>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="less" scoped>
.el-header {
  padding: 0;
  border-bottom: 1px solid var(--el-border-color);

  display: flex;
  align-items: center;

  .header-left {
    & a {
      height: 60px;
      color: inherit;
      text-decoration: none;

      display: flex;
      align-items: center;

      .logo {
        margin-left: 14px;
        width: 36px;
        height: 36px;
        background-color: var(--el-color-primary);
        border-radius: 4px;

        display: flex;
        justify-content: center;
        align-items: center;

        color: white;
      }

      .title {
        margin-left: 14px;
        font-weight: 700;

        & span {
          color: var(--el-color-primary);
        }
      }
    }
  }

  .header-center {
    flex-grow: 1;
    display: flex;
    align-items: center;

    width: 1px;

    .el-scrollbar {
      margin: 0 12px;

      .navbar {
        display: flex;

        .el-tag {
          margin-right: 10px;
          cursor: pointer;
        }
      }
    }
  }

  .header-right {
    display: flex;
    align-items: center;

    .user-info {
      margin-right: 15px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
}
.el-menu {
  height: calc(100vh - 60px);
}
.el-main {
  height: calc(100vh - 60px);
  padding: 12px;
  text-align: left;
}
</style>
